<template>
  <div>
    <el-form label-width="110px" size="small" class="base-search-more">
      <el-row>
        <el-col :span="5">
          <el-form-item label="手机号">
            <el-input style="width: 100%;" v-model="params.moblie" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="意向类型">
            <el-select style="width: 100%" v-model="params.agentType" placeholder="请选择" clearable>
              <el-option label="全部" value></el-option>
              <el-option
                v-for="item in agentType"
                :label="item.label"
                :value="item.value"
                :key="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期">
            <el-date-picker
              style="width: 100%"
              v-model="params.date"
              type="daterange"
              align="left"
              unlink-panels
              :clearable="false"
              :editable="false"
              :default-time="['00:00:00', '23:59:59']"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="状态">
            <el-select style="width: 100%" v-model="params.status" placeholder="请选择" clearable>
              <el-option label="全部" value></el-option>
              <el-option
                v-for="item in status"
                :label="item.label"
                :value="item.value"
                :key="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="text-align: center">
          <el-form-item label-width="0">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="$refs.pagination.handleSizeChange(10)"
            >查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" :row-class-name="tableRowClassName" style="width: 100%">
        <el-table-column prop="name" label="客户名称" min-width="120" align="left"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120" align="left"></el-table-column>
        <el-table-column label="客户留言" min-width="140" align="left">
          <template slot-scope="scope">
            <div class="text-over">{{scope.row.leaveMsg || '暂无'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="areas" label="所在区域" min-width="120" align="left"></el-table-column>
        <el-table-column label="客户意向" min-width="120" align="left">
          <template slot-scope="scope">{{catAgentType(scope.row.agentType)}}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="140" align="left"></el-table-column>
        <el-table-column label="来源" min-width="100" align="left">
          <!--0 pc  1 移动端-->
          <template slot-scope="scope">{{scope.row.source === 0 ? 'pc端': '移动端'}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini">
              <span :style="{color: colorState(scope.row.status)}">{{catStates(scope.row.status)}}</span>
            </el-button>
            <el-button
              class="btn border-red"
              plain
              size="mini"
              @click="lookOver(scope.row.agentId)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable"></pt-table-loading>
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent"></pt-pagination>
    </div>
    <el-dialog title="跟踪进度" v-dialogDrag :visible.sync="dialogTableVisible" width="400px">
      <el-form :model="form" status-icon ref="ruleForm" label-width="85px" size="mini">
        <el-form-item label="客户意向" style="margin-bottom: 0">
          <span class="list">{{catAgentType(form.agentType)}}</span>
        </el-form-item>
        <el-form-item label="客户留言" style="margin-bottom: 0">
          <span class="list">{{form.leaveMsg || '暂无留言'}}</span>
        </el-form-item>
        <el-form-item label="区域" style="margin-bottom: 0">
          <span class="list">{{form.areas}}</span>
        </el-form-item>
        <el-form-item label="创建时间" style="margin-bottom: 0">
          <span class="list">{{form.createTime}}</span>
        </el-form-item>
        <el-form-item label="手机号" style="margin-bottom: 0">
          <span class="list">{{form.mobile}}</span>
        </el-form-item>
        <el-form-item label="客户来源" style="margin-bottom: 0">
          <span class="list">{{form.source === 0 ? 'pc端': '移动端'}}</span>
        </el-form-item>
        <el-form-item label="跟进进度">
          <el-select v-model="statusSelect" placeholder="请选择" clearable>
            <el-option
              v-for="item in status"
              :label="item.label"
              :value="item.value"
              :key="'aa'+item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modifySatus()" :loading="isloadingsubmit">修改跟进进度</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        set: false,
        curOrderlist: {},  //修改 选择数据
       /* agentType: [ // 客户意向
          { label: '全部', value: '' },
          { label: '餐饮小程序', value: '2' },
          { label: '平台外卖系统', value: '1' },
          { label: '暂未选择', value: '0' },
        ],*/
         agentType: [ // 客户意向
          { label: '普通代理', value: '0' },
          { label: '销售代理', value: '1' },
          { label: '单店系统', value: '2' },
          { label: '叫哇', value: '5' },
          { label: '大神猫', value: '5' },
        ],
        status: [ // 客户状态
          { label: '未联系', value: '0' },
          { label: '已联系', value: '1' },
          { label: '已成交', value: '4' },
          { label: '联系不上', value: '2' },
        ],
        statusSelect: '',
        params: {  //查询数据
          page: 0,
          size: 10,
          moblie: '',
          agentType: '',
          status: '',
          data: [],
        },
        form: {}, // 详情信息
        isloadingTable: false, //表单等待
        isloadingsubmit:false,
        dialogTableVisible: false,
        tableData: {},  //表单数据
      }
    },
    methods: {
      colorState(state) {
        const colors = ['red', '#333', '#03A9F4', '#4CAF50']
        if (state) {
          if (state == '0') return colors[0]
          if (state == '1') return colors[1]
          if (state == '2') return colors[2]
          if (state == '4') return colors[3]
        } else {
          return colors[0]
        }
      },
      catStates(state) { // 状态
        if (state) {
          const index = this.status.findIndex(item => {
            return item.value == state
          })
          return index > -1 ? this.status[index].label : ''
        } else {
          return '未联系'
        }
      },
      tableRowClassName({row, rowIndex}) { // 样式
        if (row.status == '0' || !row.status) {
          return 'warning-row'
        }
        return ''
      },
      catAgentType(type) {
        if (type) {
          if (type === 5 || type === 6) {
             return type === 5 ? '叫哇' : '大神猫'
          } else {
              const index = this.agentType.findIndex(item => {
              return item.value == type
            })
            return index > -1 ? this.agentType[index].label : '暂未选择'
          }
        } else {
          return '暂未选择'
        }
      },
      lookOver(agentid) { // 查看注册信息
        this.statusSelect = ''
        this.isloadingTable = true
        this.$http.get('/server/registrationMessage/info?agentId=' + agentid).then(res => {
          if (res.data.success) {
            const row = res.data.data.registrationMessage
            this.form = row
            this.statusSelect = row.status ? row.status.toString(): '0'
            this.dialogTableVisible = true
          }
        }).finally(() => { this.isloadingTable = false })
      },
      modifySatus() { // 修改状态
        this.isloadingsubmit = true
        const params = {extendId: this.form.extendId, status: this.statusSelect }
        this.$http.get('/server/registrationMessage/modifySatus?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.dialogTableVisible = false
            this.getTableList()
          }
        }).finally(() => { this.isloadingsubmit = false })
      },
      validatePass1(rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.password1 !== '') {
            this.$refs.ruleForm.validateField('password1');
          }
          callback();
        }
      },
      validatePass2(rule, value, callback) {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      getTableList() {  //获取表单数据
        this.isloadingTable = true
        const params = { ...this.params }
        params.startTime = params.data.length ? params.data[0] : ''
        params.endTime = params.data.length ? params.data[1] : ''
        delete params.data
        this.$http.get('/server/registrationMessage/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style lang="scss" scoped>
.item .title {
  height: 30px;
  line-height: 30px;
  font-weight: bold;
}
.item ul li {
  line-height: 23px;
}
/deep/ .warning-row td {
  color: red;
  font-weight: 600;
  .btn {
    color: red !important;
  }
  .border-red {
    border: 1px solid red !important;
  }
}
.list {
  line-height: 30px;
  color: #666;
}
</style>
